<template>
	<view class="house-type-table bg-fff">
		<!-- 标题区域 -->
		<view class="table-header" @click="toDetail">
			<view class="titleWrap flex">
				<view class="title">
					<view class=" font14 fontBold txtHidden">{{ detail.title }}</view>
					<view class="font12 top-3 txtHidden" v-if="detail.beian_title">(备案名:{{ detail.beian_title }})</view>
				</view>

				<view class="plateWrap col-theme txtHidden">{{ detail.area }}/{{ detail.street_list }}</view>
			</view>
			<text class="sub-title font12 col-grey top-3">剩余房源总数：{{ totalNum }}套</text>
		</view>
		
		<!-- 表格头部 -->
		<view class="table-row header col-fff bg-theme text-center font13">
			<view class="cell">户型</view>
			<view class="cell">面积</view>
			<view class="cell">剩余套数</view>
		</view>
		
		<!-- 表格内容 -->
		<view 
			class="table-row text-center font12"
			v-for="(item, index) in detail.size_list" 
			:key="index"
			:class="{ 'row-highlight': index % 2 === 1 }"
		>
			<view class="cell">{{ item.title + ' ' + item.size_code_display }}</view>
			<view class="cell">{{ item.build_size_range ? item.build_size_range +'m²' : '/' }}</view>
			<view class="cell">{{ item.remain_count || '/' }}</view>
		</view>
	</view>
</template>

<script setup>
	import { computed } from 'vue';

	const props = defineProps({
		detail: {
			type: Object,
			default: () => ({})
		}
	});

	//总套数
	const totalNum = computed(() => {
		return props.detail.size_list.reduce((total, item) => total + item.remain_count, 0);
	});

	// 跳转详情
	function toDetail() {
		uni.navigateTo({
			url: `/pages/product/detail/index?productId=${props.detail.product_id}&kaiId=${props.detail.id}`
		});
	};

</script>

<style lang="scss" scoped>
.house-type-table {
	margin: 28rpx;
	
	.table-header {
		padding: 20rpx 0;
		.titleWrap{
			justify-content: space-between;
			.title{
				max-width: calc(100% - 220rpx);
			}
			.plateWrap{
				max-width: 220rpx;
			}
		}
	}
	
	.table-row {
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		
		&.row-highlight {
			background: rgba(0, 114, 53, 0.05);
		}
		
		.cell {
			flex: 1;
			&:first-child {
				text-align: left;
				padding-left: 30rpx;
			}
		}
	}
}
</style>
